<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../../css/demo.css" />
    
    <title>Jslet - DBRating</title>
    <script type="text/javascript" data-main="../../config.js" src="../../lib/requirejs/require.min.js"></script>
    <script type="text/javascript">
	    require(['dbcontrol/form/e-dbrating']);
    </script>
</head>
<body>
    <div class="demo-header">
    <h4 id="top">Jslet - DBRating</h4>
	</div>
	<hr />

	<div data-jslet="type: 'DBTable', dataset: 'analyst'" style="margin-bottom: 10px"></div>
	
	<div class="container-fluid">
	<div class="form-horizontal">
	
	<div class="form-group form-group-sm" style="height: 150px">
	<div class="col-sm-1">
		<label>1、只读</label>
	</div>
	<div class="col-sm-3">
		<div data-jslet='type:"DBRating", dataset:"analyst", field:"rating1"'></div>
	</div>
	<div class="col-sm-2">
		<label>2、每一项分隔为4部分（即值为：0.25,0.5,...,4.75,5)</label>
	</div>
	<div class="col-sm-3">
		<div id="ratingEl" data-jslet='type:"DBRating", dataset:"analyst", field:"rating2", itemCount:5, splitCount:4'></div>
	</div>
	</div>

	<div class="form-group form-group-sm" style="height: 150px">
	<div class="col-sm-3">
		<label>3、共有10项,每项分为2部分（即值为：0.5,1,...,9.5,10)</label>
	</div>
	<div class="col-sm-3">
		<div data-jslet='type:"DBRating", dataset:"analyst", field:"rating3", itemCount:10, splitCount:2'></div>
	</div>

	</div>
	</div>
	
	
	<hr />
	<h4>源码</h4>
	<h5>HTML</h5>
    <pre class="prettyprint linenums"><code>
    //1、只读
    &lt;div data-jslet='type:"DBRating", dataset:"analyst", field:"rating1"'>&lt;/div>
    
    //2、每一项分隔为4部分（即值为：0.25,0.5,...,4.75,5)
    &lt;div id="ratingEl" data-jslet='type:"DBRating", dataset:"analyst", field:"rating2", itemCount:5, splitCount:4'>&lt;/div>
    
    //3、共有10项,每项分为2部分（即值为：0.5,1,...,9.5,10)
    &lt;div data-jslet='type:"DBRating", dataset:"analyst", field:"rating3", itemCount:10, splitCount:2'>&lt;/div>
	</code></pre>
    
	<h5>JavaScript</h5>
    <pre class="prettyprint linenums"><code>
	//创建测试数据集
	var dsCfg = {name: "analyst", fields: [
   	    {name: "name", dataType: 'S', length: 10, label: 'Name', required: true},
   	    {name: "rating1", dataType: 'N', length: 8, scale: 2, label: 'Rating1', readOnly: true},
   	    {name: "rating2", dataType: 'N', length: 8, scale: 2, label: 'Rating2'},
   	    {name: "rating3", dataType: 'N', length: 8, scale: 2, label: 'Rating3'}
        ]};
	dsAnalyst = new jslet.data.Dataset(dsCfg);
	//初始数据
	var records = [{ name: "Tom", rating1: 3, rating2: 3.25, rating3: 6 }, 
	                { name: "Jerry", rating1: 1.5, rating2: 2.5, rating3: 4 }, 
	                { name: "Mark", rating1: 0, rating2: 1.75, rating3: 9 }, 
	                { name: "Join", rating1: 5, rating2: 4.5, rating3: 2}];
	dsAnalyst.records(records);
	
	jslet.ui.install();
	</code></pre>

    <script type="text/javascript">
       window.LOADER_BASE_URL = "../../lib/prettify";
    </script>
    <script type="text/javascript" src="../../lib/prettify/run_prettify.js"></script>
		
</body>
</html>
